<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>添加收货地址</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    @include('public.h5_head')
    <script src="{{ env('CDN_DOMAIN_NAME') }}/js/commonjs/rem.js"></script>
    <link rel="stylesheet" type="text/css" href="{{ env('CDN_DOMAIN_NAME') }}/css/commoncss/common.css"/>
    <link rel="stylesheet" type="text/css" href="{{ env('CDN_DOMAIN_NAME') }}/css/details.css"/>
    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_o5vjtg2qn5sfko6r.css"/>
</head>
<script src="{{ env('CDN_DOMAIN_NAME') }}/js/app.js"></script>
<script src="{{ env('CDN_DOMAIN_NAME') }}/js/commonjs/common.js"></script>

<body>
<div id="box_add">
    <div class="wrap">
        <div class="main_add">
            <div class="main_t">地址信息</div>
            <div class="new">
                <ul>
                    <li class="new_li">
                        <input type="text" maxlength="6" id="zi-name" placeholder="收货人姓名（请使用真实姓名）" class="inp1 inp" />
                    </li>
                    <li class="new_li">
                        <input type="tel" maxlength="11"  id="zi-tel" placeholder="手机号码" class="inp2 inp" />
                    </li>
                    <li class="new_li">
                        <div class="container zi-pro">
                            <select name="web_select" id="select1" class="web_select inp3 pro-inp" onchange="tt(this.id)">
                                <option value="">请选择</option>
                                @foreach ($data as $area)
                                    <option value="{{ $area->area_bh }}">{{ $area->area_name }}</option>
                                @endforeach
                            </select>
                            <select name="web_select1" id="select2" class="web_select inp4 pro-inp" onchange="tt(this.id)">
                                <option value="">请选择</option>
                            </select>
                            <select name="web_select2" id="select3" class="inp5 pro-inp" onchange="tt(this.id)">
                                <option value="">请选择</option>
                            </select>
                        </div>
                    </li>
                    <li class="new_li">
                        <textarea class="tex" id="zi-tex" placeholder="详细地址" maxlength="80"></textarea>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="details_save" style="background: #1aad1a"><a class="details_a" href="javascript:;">保存</a></div>
    <div class="hint hint-n" style="display:none;">请填写中文名</div>
    <div class="hint hint-t" style="display:none;">手机号码格式不正确</div>
    <meta name="csrf_token" id="token" content="{{ csrf_token() }}">

</div>
</body>
<script src="{{ env('CDN_DOMAIN_NAME') }}/js/default.js"></script>
<script>
    is_weixn('.details_save');
    var lineFeed=document.getElementById("zi-tex").value;
    lineFeed=lineFeed.replace('<br />','/n');
    document.getElementById("zi-tex").value=lineFeed;

    function tt(id) {
        var val = $("#"+id+" option:selected").text();
        if(val.length > 5){
            $("#"+id+" option:selected").text(val.substring(0,4)+'...');
        }
    }
    $('.details_save').click(function () {
        if(!checkName() || !checkTel() || !checkarea() || !checkTex() )
        {
            return false;
        }
        var name = $('#zi-name').val();
        var tel = $('#zi-tel').val();
        var select = $('#select1').val();
        var select1 = $('#select2').val()
        var select2 = $('#select3').val()
        var user_areadetails = $('#zi-tex').val();
        $.ajax({
            url:'/user-area',
            type:'POST',
            data:{user_name:name,user_tel:tel,web_select:select,web_select1:select1,web_select2:select2,user_areadetails:user_areadetails},
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
            },
            dataType:'json',
            success:function(data){
                if(data.success == true)
                {
                    window.location.href = '/center/user-areas?type={{ $_GET['type'] }}';
                }else{
                    alert('000');
                }
            }
        })
    });
    /*正则验证*/
    function checkName(){
        //验证中文名
        var name=document.getElementById("zi-name").value;
        var exp=/^[\u4E00-\u9FA5]{2,6}$/;
        if(exp.test(name)){
            //合格
            return true;
        }else{
            //不合格
            $("#box_add .hint-n").show().delay(1000).hide(0);
            return false;
        }
    }
    function checkTel(){
        //验证手机号
        var tel=document.getElementById("zi-tel").value;
        var exp=/^1[34578]\d{9}$/;
        if(exp.test(tel)){
            //合格
            return true;
        }else{
            //不合格
            $("#box_add .hint-t").show().delay(1000).hide(0);
            return false;
        }
    }
    function checkTex(){
        //详细地址
        var tex=document.getElementById("zi-tex").value;
        /*var exp=/^[\u4E00-\u9FA5 A-Za-z0-9-]+$/;*/
        var exp=/^[\u4E00-\u9FA5A-Za-z\d\-\_]{3,80}$/;
        if(exp.test(tex)){
            //合格
            return true;
        }else{
            //不合格
            $("#box_add .hint-t").html('请填写详细地址');
            $("#box_add .hint-t").show().delay(1000).hide(0);
            return false;
        }
    }

    function checkarea() {
        var select2 = $('#select3').val()
        if(select2.length > 5)
        {
            return true;
        }else{
            $("#box_add .hint-t").html('请选择省市');
            $("#box_add .hint-t").show().delay(1000).hide(0);
            return false;
        }
    }

    function is_weixn(){
        var u = navigator.userAgent;
        var ua = navigator.userAgent.toLowerCase();
        if((ua.match(/MicroMessenger/i)=="micromessenger")&&(u.indexOf('Android')>-1)) {//微信终端&&android终端
            var oHeight = $(document).height(); //浏览器当前的高度
            $(window).resize(function(){
                if($(document).height() < oHeight){
                    $(".details_save").hide();
                }else{
                    $(".details_save").show();
                }
            })
        }
    }
    is_weixn();
</script>
</html>

